@esui-uploadercontainer-head-height: 2.2em;
@esui-uploadercontainer-info-size: 0.8em;

.@{ui-class-prefix}-uploadercontainer {
    display: inline-block;
    border: @esui-uploadercontainer-border;
    box-sizing: border-box;
}

.@{ui-class-prefix}-uploadercontainer-head {
    height: @esui-uploadercontainer-head-height;
    line-height: @esui-uploadercontainer-head-height;
    background-color: @esui-uploadercontainer-header-background;
}

.@{ui-class-prefix}-uploadercontainer-head .@{ui-class-prefix}-uploadercontainer-head-info {
    display: inline-block;
    span {
        color: @esui-uploadercontainer-number-color;
    }
}

.@{ui-class-prefix}-uploadercontainer-head .@{ui-class-prefix}-uploadercontainer-delete-all {
    float: right;
    cursor: pointer;
    margin-right: 0.5em;
    color: @esui-uploadercontainer-delete-all-color;
}

.@{ui-class-prefix}-uploadercontainer-head .@{ui-class-prefix}-uploadercontainer-head-info,
.@{ui-class-prefix}-uploadercontainer-head .@{ui-class-prefix}-uploadercontainer-delete-all {
    font-size: @esui-uploadercontainer-info-size;
}

.@{ui-class-prefix}-uploadercontainer-body {
    overflow-y: auto;
    background-color: @esui-uploadercontainer-body-background;
}

.@{ui-class-prefix}-uploadercontainer-line
{
    cursor: pointer;
    p {
        display: inline-block;
    }
}
.@{ui-class-prefix}-uploadercontainer-line:hover,
.@{ui-class-prefix}-uploadercontainer-line.@{ui-class-prefix}-uploadercontainer-line-selected {
    background-color: @esui-uploadercontainer-line-selected;
}

.@{ui-class-prefix}-uploadercontainer-line .@{ui-class-prefix}-uploadercontainer-line-title {
    width: 60%;
    padding-left: 0.2em;
}

.@{ui-class-prefix}-uploadercontainer-line .@{ui-class-prefix}-uploadercontainer-line-delete {
    float: right;
    margin-right: 0.5em;
    color: @esui-uploadercontainer-delete-color;
}
